<!DOCTYPE html>
<html>
<head>
    <title>选择测试长度</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet">
    <link href="{{ url_for('static', filename='css/style.css') }}" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>
    <style>
        .test-length-card {
            background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        
        .test-length-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
        }
        
        .test-length-card.short {
            border-top: 6px solid #4CAF50;
        }
        
        .test-length-card.medium {
            border-top: 6px solid #FFC107;
        }
        
        .test-length-card.full {
            border-top: 6px solid #F44336;
        }
        
        .length-icon {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px;
            font-size: 2.5rem;
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        }
        
        .short .length-icon {
            background: linear-gradient(135deg, #4CAF50 0%, #8BC34A 100%);
            color: white;
        }
        
        .medium .length-icon {
            background: linear-gradient(135deg, #FFC107 0%, #FF9800 100%);
            color: white;
        }
        
        .full .length-icon {
            background: linear-gradient(135deg, #F44336 0%, #E91E63 100%);
            color: white;
        }
        
        .length-title {
            font-size: 1.8rem;
            font-weight: 700;
            margin-bottom: 15px;
            position: relative;
            display: inline-block;
        }
        
        .length-title::after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 50%;
            transform: translateX(-50%);
            width: 50px;
            height: 3px;
            border-radius: 2px;
        }
        
        .short .length-title::after {
            background: #4CAF50;
        }
        
        .medium .length-title::after {
            background: #FFC107;
        }
        
        .full .length-title::after {
            background: #F44336;
        }
        
        .length-description {
            font-size: 1.05rem;
            color: #555;
            margin-bottom: 25px;
            min-height: 80px;
        }
        
        .length-btn {
            border-radius: 50px;
            padding: 12px 30px;
            font-size: 1.1rem;
            font-weight: 600;
            border: none;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            z-index: 1;
        }
        
        .length-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            transition: transform 0.5s ease;
            transform: scaleX(0);
            transform-origin: right;
        }
        
        .length-btn:hover::before {
            transform: scaleX(1);
            transform-origin: left;
        }
        
        .short .length-btn {
            background: linear-gradient(135deg, #4CAF50 0%, #8BC34A 100%);
            color: white;
            box-shadow: 0 8px 20px rgba(76, 175, 80, 0.3);
        }
        
        .short .length-btn::before {
            background: linear-gradient(135deg, #8BC34A 0%, #4CAF50 100%);
        }
        
        .medium .length-btn {
            background: linear-gradient(135deg, #FFC107 0%, #FF9800 100%);
            color: white;
            box-shadow: 0 8px 20px rgba(255, 193, 7, 0.3);
        }
        
        .medium .length-btn::before {
            background: linear-gradient(135deg, #FF9800 0%, #FFC107 100%);
        }
        
        .full .length-btn {
            background: linear-gradient(135deg, #F44336 0%, #E91E63 100%);
            color: white;
            box-shadow: 0 8px 20px rgba(244, 67, 54, 0.3);
        }
        
        .full .length-btn::before {
            background: linear-gradient(135deg, #E91E63 0%, #F44336 100%);
        }
        
        .length-btn:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2);
        }
        
        .length-duration {
            font-size: 0.9rem;
            color: #777;
            margin-top: 15px;
            display: block;
        }
        
        .card-container {
            perspective: 1500px;
        }
        
        .test-length-card {
            transform-style: preserve-3d;
        }
        
        /* 移动端优化 */
        @media (max-width: 768px) {
            .test-length-card {
                margin-bottom: 30px;
            }
            
            .length-icon {
                width: 70px;
                height: 70px;
                font-size: 2rem;
            }
            
            .length-title {
                font-size: 1.6rem;
            }
            
            .length-description {
                min-height: auto;
                margin-bottom: 20px;
            }
            
            .length-btn {
                padding: 10px 25px;
                font-size: 1rem;
            }
        }
        
        @media (max-width: 480px) {
            .length-icon {
                width: 60px;
                height: 60px;
                font-size: 1.8rem;
            }
            
            .length-title {
                font-size: 1.4rem;
            }
            
            .length-description {
                font-size: 0.95rem;
            }
        }
    </style>
</head>
<body class="gradient-bg">
    <div class="container py-5">
        <div class="row justify-content-center mb-5">
            <div class="col-lg-8 text-center">
                <h1 class="display-4 fw-bold mb-3 text-white">选择测试长度</h1>
                <p class="lead text-light mb-0">根据您的时间和需求，选择合适的测试长度</p>
            </div>
        </div>
        
        <div class="row justify-content-center">
            <!-- 20题 - 短测试 -->
            <div class="col-lg-4 col-md-6 card-container mb-4">
                <div class="test-length-card short h-100 p-4">
                    <div class="text-center">
                        <div class="length-icon">
                            <i class="bi bi-lightning-charge"></i>
                        </div>
                        <h3 class="length-title">快速测试</h3>
                        <p class="length-description">
                            只需完成20道核心题目，快速了解您的基本人格类型。适合时间有限或初次接触MBTI的用户。
                        </p>
                        <form method="POST">
                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                            <input type="hidden" name="test_length" value="20">
                            <button type="submit" class="length-btn">
                                开始20题测试
                            </button>
                            <span class="length-duration">约5-8分钟</span>
                        </form>
                    </div>
                </div>
            </div>
            
            <!-- 60题 - 标准测试 -->
            <div class="col-lg-4 col-md-6 card-container mb-4">
                <div class="test-length-card medium h-100 p-4">
                    <div class="text-center">
                        <div class="length-icon">
                            <i class="bi bi-bar-chart"></i>
                        </div>
                        <h3 class="length-title">标准测试</h3>
                        <p class="length-description">
                            完成60道精选题目，获得更准确的人格分析报告。平衡了测试时长和结果准确性。
                        </p>
                        <form method="POST">
                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                            <input type="hidden" name="test_length" value="60">
                            <button type="submit" class="length-btn">
                                开始60题测试
                            </button>
                            <span class="length-duration">约15-20分钟</span>
                        </form>
                    </div>
                </div>
            </div>
            
            <!-- 120题 - 完整测试 -->
            <div class="col-lg-4 col-md-6 card-container mb-4">
                <div class="test-length-card full h-100 p-4">
                    <div class="text-center">
                        <div class="length-icon">
                            <i class="bi bi-award"></i>
                        </div>
                        <h3 class="length-title">完整测试</h3>
                        <p class="length-description">
                            完成全部120道题目，获得最全面、最深入的人格分析报告。适合追求精准结果的用户。
                        </p>
                        <form method="POST">
                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                            <input type="hidden" name="test_length" value="120">
                            <button type="submit" class="length-btn">
                                开始120题测试
                            </button>
                            <span class="length-duration">约25-35分钟</span>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row justify-content-center mt-4">
            <div class="col-lg-8 text-center">
                <div class="card bg-light border-0 p-4">
                    <h4 class="mb-3">测试长度说明</h4>
                    <div class="row">
                        <div class="col-md-4 mb-3">
                            <div class="d-flex align-items-center">
                                <div class="badge bg-success me-2">20题</div>
                                <div>每个维度5题</div>
                            </div>
                        </div>
                        <div class="col-md-4 mb-3">
                            <div class="d-flex align-items-center">
                                <div class="badge bg-warning me-2">60题</div>
                                <div>每个维度15题</div>
                            </div>
                        </div>
                        <div class="col-md-4 mb-3">
                            <div class="d-flex align-items-center">
                                <div class="badge bg-danger me-2">120题</div>
                                <div>完整题目集</div>
                            </div>
                        </div>
                    </div>
                    <p class="mb-0">
                        所有测试版本都经过精心设计，确保每个维度的题目分布均匀，从而提供准确可靠的人格分析结果。
                    </p>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        // 添加卡片悬停效果
        document.addEventListener('DOMContentLoaded', function() {
            const cards = document.querySelectorAll('.test-length-card');
            
            cards.forEach(card => {
                card.addEventListener('mouseenter', function() {
                    this.style.transform = 'translateY(-15px) rotateY(10deg)';
                });
                
                card.addEventListener('mouseleave', function() {
                    this.style.transform = 'translateY(0) rotateY(0)';
                });
            });
            
            // 移动端点击效果
            if (window.innerWidth <= 768) {
                cards.forEach(card => {
                    card.addEventListener('click', function() {
                        cards.forEach(c => c.classList.remove('active'));
                        this.classList.add('active');
                        
                        // 添加动画效果
                        this.style.animation = 'pulse 0.5s';
                        setTimeout(() => {
                            this.style.animation = '';
                        }, 500);
                    });
                });
            }
        });
    </script>
</body>
</html>